 <!-- 常规登入 -->
<template>
   <div class="common-login">
          
  <el-form-item label="用户名" prop="username" class="ps" >
              <el-input type="text" v-model="ruleForm.username" autocomplete="off" class="tone"></el-input>
        </el-form-item>
              <!-- 密码输入 -->
        <el-form-item label="输入密码" prop="password"  class="ps" >
              <el-input type="password" v-model="ruleForm.password" autocomplete="off" class="tone"></el-input>
        </el-form-item>
              <!-- 验证码输入 -->
        <el-form-item label="验证码" prop="captcha"   >
              <el-input v-model.number="ruleForm.captcha" type="text" @keydown.native.enter="submitForm('ruleForm')" class="captcha"></el-input>
              <span class="captcha-svg">
                  <i v-html="captcha" @click="getCaptcha" v-loading="loading"></i>
              </span>
        </el-form-item>
              <!-- 按钮 -->
        <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
              <!-- 手机登入 -->
        <el-form-item>
            <div class="sjd">
                  <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iphone"></use>
                  </svg>
                  <a href="javascript::"  @click="$emit('changeSmsType')" style="color:#fff; font-size:16px" >切换短信登入</a>
            </div>
        </el-form-item>
            
   </div>
</template>

<script>
import * as api from "@/api/users"
export default{

//   props:['ruleForm'],
  data(){
     return {
      isSjdrLogin:"flase",
      loading: false,
      captcha:"", // 验证码
      ruleForm:{
        username: '',
        password: '',
        captcha: '',
      }
     }
  },
  //   通过loginForm监听数据的变化
  watch: {
    loginForm: {
      handler(newVal) {
        // console.log(newVal);
        // 子传父触发父组件事件
        this.$emit("syncLoginForm", newVal);
      },
      deep: true,
    },
  },
    mounted() {},
    created() {
    this.getCaptcha();
  },
  methods: {
    submitForm(formName) {
      // console.log(formName);
      //  console.log(this.$refs);
      this.$emit("submit");
    },
    //封装一个获取验证码的方法
    getCaptcha() {
      //获取验证码
      //打开加载动画
      this.loading = true;
      api.getCaptcha().then((res) => {
        // console.log(res);
        this.captcha = res.data.img;
        //关掉加载动画
        this.loading = false;
      });
    },
  },
 
}


</script>

<style lang="less" scoped>
//  .el-input{   // 表单输入框
//     /deep/.el-input__inner{
//         width:300px;
//     }
//   }
.tone{
      border-radius: 15px;
}
  .el-form{
      position: fixed;
      right: 10%;
      top: 25%;
      width: 400px;
      background-color: rgba(0, 0, 0, 0.3);
      padding: 100px 0 50px 0;

      /deep/ .el-form-item__label {
      color: #fff;
      
    }

      .el-input__inner {
      width: 100%;
      height: 45px;
      // border-radius: 5px 0 0 5px;
      border: 0;
      font-size: 18px;
       } 

        .captcha-svg {
            background: #fff;
            display: inline-block;
            height: 40px;
            width: 150px;
            text-align: center;
            cursor: pointer;
            border: 0;
            border-radius: 0px 5px 5px 0;
            position:fixed ;
            
        }
        .el-form-item__content {
            margin-left: 30px !important;
            width: 250px !important;
        }


  }
.sjd{
      text-align: center;
      // color: #fff;
      // width: 250px;
      // height: 401px;
      // line-height: 40px;
      // position: relative;
      // font-size: 14px;
      margin-left: -15px!important;
      width: 250px!important;
}

.common-login{
      padding-right: 50px;
      width: 400px;
      height: 308px;
}
.icon {
    width: 2em;
    height: 2em;
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden;
}
/deep/.captcha{
      width: 150px !important;
      height: 40px !important;
      border-radius: 0px !important;
}

</style>